<style lang="scss" >
.finance-income {
  width: 100%;
  @import "../../management/index.scss";
  .btn-box {
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 20px;
    .btn {
      width: 100px;
      line-height: 40px;
      text-align: center;
      margin-right: 10px;
      outline: none;
      border: 0;
      color: #fff;
      background: #d15b47;
      cursor: pointer;
    }
    .btn1 {
      background-color: #428bca;
    }
    .btn2 {
      background-color: #ffb752;
    }
  }
  .ivu-page {
    margin: 20px 0;
  }

  .handel-date {
    .ivu-form-item-required {
      margin-right: 0;
    }
  }
  // .finance-details{
  //     font-size:14px;
  //     display:flex;
  //     .yesterday-finance{
  //         padding:20px ;
  //         text-align:center;
  //         border-right: 1px solid #E1E1E1;
  //         .content{
  //             font-size: 20px;
  //             color:red;
  //         }
  //         &:last-child{
  //             border-right: 0;
  //             .content{
  //                 color:#0099FF;
  //             }
  //         }
  //     }
  // }
  .finance-handel {
    width: 100%;
    background-color: #d9edf7;
    height: 50px;
    border-color: #bce8f1;
    color: #31708f;
    font-size: 14px;
    border-radius: 0;
    position: relative;
    // display:flex;
    // align-items: center;
    // justify-content:space-around ;
    .desc {
      position: absolute;
      left: 15px;
      line-height: 50px;
    }
    .ivu-btn-success {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translate(0, -50%);
      margin: 0;
    }
  }
  .tips-wall-box {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .tips-wall {
      min-width: 200px;
      width: 32%;
      box-sizing: border-box;
      border-radius: 10px;
      padding: 20px 30px;
      background-color: #6bcab5;
      font-size: 20px;
      color: #fff;
    }
    .wall1 {
      background: #666a7f;
    }
    .wall2 {
      background: #7592ce;
    }
  }
  .handel-content {
    border: 1px solid #bce8f1;
    border-top: 0;
    margin-top: 0;
    padding-top: 30px;
    margin-bottom: 20px;
  }

  .income-details {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    // background:
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
    // margin-bottom: 20px;
    .desc {
      font-size: 14px;
      line-height: 30px;
    }
  }
}
.commit-btn {
  display: flex;
  justify-content: center;
  button {
    margin: 0 20px;
  }
}

.cash-phone-container {
  width: 100%;
  display: flex;
  button {
    margin-left: 15px;
  }
}
.model-box {
  width: 500px;
  margin: 0 auto;
  box-sizing: border-box;

  // background-color:red;
}
</style>

<template>
  <div class="finance-income">
    <Card>
      <div class="income-details">
        <div class="desc">
          <strong>账户余额</strong>
        </div>

        <div class="income-handel-details">
          <Input
            v-model="formatNumber"
            prefix="logo-yen"
            placeholder="Enter number"
            style="width: 120px"
          />
          <Button type="primary" @click="cash = true">提现</Button>
          <Button type="text" @click="$router.push('/finance/income/record')">提现记录</Button>
        </div>
      </div>

      <!--
            <p slot="title" class="card-title">
                <span>商户通道变更审核</span>
                <button class="excle-handel"> </button>
      </p>-->
      <!-- <div class="finance-handel">
                <div class="desc"> 查询</div>
                <Button type="success"  style="margin-right: 5px" @click="toExcle">导出excel</Button>
      </div>-->
      <header>
        <div class="handel-content">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
            <div class="handel-details">
              <FormItem label="商户名：" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入"></Input>
              </FormItem>

              <FormItem label="类型：" prop="city">
                <Select v-model="formValidate.city" placeholder="请选择">
                  <Option value="beijing">全部</Option>
                  <Option value="shanghai">年结</Option>
                  <Option value="shenzhen">月结</Option>
                </Select>
              </FormItem>

              <FormItem label="提现时间:">
                <div class="handel-date">
                  <FormItem prop="date">
                    <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                  </FormItem>
                  <div class="line">-</div>
                  <FormItem prop="date">
                    <DatePicker type="date" placeholder="Select date" v-model="formValidate.time"></DatePicker>
                  </FormItem>
                </div>
              </FormItem>
            </div>

            <FormItem>
              <Button type="primary" icon="ios-search">搜索</Button>
              <!-- <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
              <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>-->
            </FormItem>
          </Form>
        </div>
      </header>

      <!-- 
            <div class="btn-box">  
                <button :class="['btn', '', {'btn-info':false} ]" @click="changeActive($event)" index="0">禁用</button>
                <button :class="['btn', 'btn1', {'btn-info':false} ]" index="1"  @click="changeActive($event)">添加</button>
                <button :class="['btn', 'btn2', {'btn-info':false} ]" index="2"  @click="changeActive($event)">密码解锁</button>            
            </div>
      -->

      <Table border ref="selection" :columns="columns4" :data="data1">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">同意</Button>
          <Button type="warning" size="small" style="margin-right: 5px" @click="remove(index)">拒绝</Button>
        </template>
      </Table>

      <Page
        :total="data.total"
        class="tr"
        @on-change="pageChange"
        :current.sync="data.current"
        :page-size="data.size"
        @on-page-size-change="pageSizeChange"
        show-elevator
        show-sizer
      ></Page>
    </Card>

    <Modal v-model="cash" footer-hide fullscreen title="申请提现">
      <div class="model-box">
        <Form :model="cashValidate" :label-width="80">
          <FormItem label="提现金额" prop="merchantName">
            <Input v-model="cashValidate.merchantName" placeholder="Enter your name"></Input>
          </FormItem>

          <FormItem label="可提现金额" prop="merchantName"></FormItem>

          <FormItem label="提现账号">
            <Select v-model="model1" style="width:200px">
              <Option
                v-for="item in cityList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </FormItem>

          <FormItem label="备注">
            <Input v-model="cashValidate.value10" type="textarea" placeholder="Enter something..." />
          </FormItem>

          <FormItem label="验证码" prop="merchantName">
            <div class="cash-phone-container">
              <Input v-model="cashValidate.merchantName" placeholder="Enter your name"></Input>
              <Button type="success">获取验证码</Button>
            </div>
          </FormItem>
        </Form>

        <br />

        <div class="commit-btn">
          <Button type="warning" @click="cash = false">取消</Button>
          <Button type="success" @click="cashHandel">提交</Button>
        </div>
        <br />
        <br />
      </div>
    </Modal>
  </div>
</template>

<script>
// console.log($)
export default {
  name: "finance_income",
  data() {
    return {
      incomeMoney: "",
      formValidate: {
        name: "",
        mail: "",
        city: "beijing",
        gender: "",
        interest: [],
        date: "",
        time: "",
        desc: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        mail: [
          {
            required: true,
            message: "Mailbox cannot be empty",
            trigger: "blur"
          },
          { type: "email", message: "Incorrect email format", trigger: "blur" }
        ],
        city: [
          {
            required: true,
            message: "Please select the city",
            trigger: "change"
          }
        ],
        gender: [
          { required: true, message: "Please select gender", trigger: "change" }
        ],
        interest: [
          {
            required: true,
            type: "array",
            min: 1,
            message: "Choose at least one hobby",
            trigger: "change"
          },
          {
            type: "array",
            max: 2,
            message: "Choose two hobbies at best",
            trigger: "change"
          }
        ],
        date: [
          {
            required: true,
            type: "date",
            message: "Please select the date",
            trigger: "change"
          }
        ],
        time: [
          {
            required: true,
            type: "string",
            message: "Please select time",
            trigger: "change"
          }
        ],
        desc: [
          {
            required: true,
            message: "Please enter a personal introduction",
            trigger: "blur"
          },
          {
            type: "string",
            min: 20,
            message: "Introduce no less than 20 words",
            trigger: "blur"
          }
        ]
      },
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "充值订单号",
          key: "name"
        },
        {
          title: "充值商户",
          key: "age"
        },
        {
          title: "类型",
          key: "address"
        },
        {
          title: "充值金额（元）",
          key: "address"
        },
        {
          title: "收入金额（元）",
          key: "address"
          // align: 'center'
        },
        {
          title: "支付方式",
          key: "address"
          // align: 'center'
        },
        {
          title: "充值时间",
          key: "address"
          // align: 'center'
        },

        {
          title: "备注",
          key: "address"
          // align: 'center'
        }
      ],
      data1: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ],
      data: {},
      dataFilter: {
        page: 1,
        pageSize: 10
      },
      cash: false,
      cashValidate: {},

      cityList: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "London",
          label: "London"
        },
        {
          value: "Sydney",
          label: "Sydney"
        },
        {
          value: "Ottawa",
          label: "Ottawa"
        },
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      model1: ""
    };
  },
  methods: {
    /**
     * @description 分页更换事件回调
     */
    pageChange(p) {
      this.dataFilter.page = p;
      this.getData();
    },
    /**
     * @description 分页每页显示数量改变事件回调
     */
    pageSizeChange(p) {
      this.dataFilter.pageSize = p;
      this.getData();
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    show(index) {
      console.log(index);
    },
    remove(index) {
      console.log(index);
      this.data1.splice(index, 1);
    },
    toExcle() {
      this.$refs.selection.exportCsv({
        filename: "The original data"
      });
    },
    cashHandel() {
      this.cash = false;
    }
  },
  computed: {
    formatNumber: {
      get() {
        if (this.incomeMoney === "") return "";
        return this.incomeMoney;
      },
      set(val) {
        //  return 'Enter number';
        // function parseNumber(str) {
        //     const re = /^\d+(\.\d+)?$/g;
        //     return str.replace(re, ',');
        // }
        // if (this.incomeMoney === '') return ''
        this.incomeMoney = val;
        // return
      }
    }
  }
};
</script>